<template>
  <div class="order-list">
    <div class="order-box" v-for="item in shareList" :key="item.orderId">
      <div class="address-item" >
      <div class="box-item">分配时间 <span>{{item.crtTm}}</span></div>
      <div class="box-item">分配订单号 <span class="order-number">{{item.orderId}}</span></div>
      <div class="box-item">分配地点<span>{{item.place}}</span></div>
      <div class="box-item">分配流量 <span>{{item.allotFlow.toFixed(1)}}G</span></div>
      </div>
    </div>
    <div class="btnMsg" @click="getFenpei">{{btnMsg}}</div>
  </div>
</template>

<script>
import {ALLOTRCD} from '../../api/request'
export default {
  name: 'index',
  data () {
    return {
      shareList: [],
      shareBegin: 1,
      btnMsg: '加载更多'
    }
  },
  mounted () {
    this.getFenpei()
  },
  methods: {
    getFenpei: function () {
      const that = this
      if (that.btnMsg === '加载更多') {
        ALLOTRCD(this.$store.getters.uid, that.shareBegin).then(
          res => {
            let respData = res.data
            if (respData.code === 200) {
              let _list = respData.data
              that.shareList = [...that.shareList, ..._list]
              if (_list.size < 4) {
                that.btnMsg = '没有更多了'
              }
              that.shareBegin++
            } else {
              that.btnMsg = '没有更多了'
            }
          },
          error => {
            console.log(error)
          })
      }
    }
  }
}
</script>

<style scoped>
  .order-box{
    width: 7.36rem;
    height: 3.4rem;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 0.16rem;
    padding-top: 0.2rem;
    margin-top: 0.2rem;
  }
  .box-item{
    height:0.74rem;
    line-height:0.74rem;
    vertical-align: bottom;
    font-size: 0.36rem;
    padding-right: 0.4rem;
    padding-left: 0.4rem;
  }
  .box-item span {
    font-size: .34rem;
    color: #a09f9f;
    float: right;
    width: 4rem;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
  }
  .order-number{
    font-size: 0.3rem!important;
  }
  .order-list {
    background-color: #ebebeb;
    padding-top: 0.2rem;
  }
  .btnMsg{
    margin-top: 0.3rem;
    height: 0.7rem;
    line-height: 0.7rem;
    font-size: 0.4rem;
    color: #333;
    text-align: center;
  }
</style>
